<template>
  <div class="topMsg">
    <span class="div-left"
      >您好！ 张吉林先生 今天{{ year }}年 {{ month }}月{{ day }}日 {{ weekDay }}
    </span>
    <div class="div-right" v-if="info != null">
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ info.name }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            ><span @click="clickOut">退出登录</span></el-dropdown-item
          >
          <el-dropdown-item
            ><span @click="clickTo">跳转后台</span></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <span class="div-right" v-else>
      <span @click="clickBock">注册</span>
      <span>|</span>
      <span @click="clickLogin">登录</span>
    </span>
  </div>
</template>
<script>
import { basePath, basePath2 } from "@/common";
import { getInfo, removeToken, getToken } from "@/utils/auth";
export default {
  data() {
    return {
      info: {},
      year: "",
      month: "",
      day: "",
      weekDay: "",
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },
  methods: {
    clickBock() {
      this.$router.push("/register");
    },
    clickLogin() {
      this.$router.push("/login");
    },
    clickTo() {
      let url = "";
      if (process.env.NODE_ENV == "development") {
        url = basePath;
      } else {
        url = basePath2;
      }
      window.location.href = url + "/#/?tk=999HHAIO";
    },
    clickOut() {
      removeToken();
      sessionStorage.removeItem("info");
      this.$router.push("/login");
    },
    getDate() {
      const now = new Date();
      this.year = now.getFullYear();
      this.month = now.getMonth() + 1; // 月份从0开始，需要加1
      this.day = now.getDate();
      const weekDays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const today = new Date().getDay();
      this.weekDay = weekDays[today];
    },
  },
  mounted() {
    this.info = JSON.parse(getInfo());
    this.getDate();

    console.log(process.env, "process.env");
  },
};
</script>
<style scoped>
.topMsg {
  width: 80%;
  margin: 0 auto;
  position: relative;
}
.div-left {
  display: inline-block;
  width: 50%;
  position: absolute;
  left: 0;
  text-align: left;
  font-family: PingFangSC-Regular;
  font-size: 16px;

  color: #333333;
}
.div-right {
  display: inline-block;
  width: 50%;
  position: absolute;
  right: 0;
  text-align: right;
}
.div-right span {
  padding: 0 4px;
}
.div-right span:hover {
  cursor: pointer;
  color: #0065ff;
}
.avatar {
  vertical-align: middle;
}
</style>